<template>
  <template v-if="props.styleClass == 'fixed'">
    <teleport to="html">
      <div :class="['pagination', props.styleClass]">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[3, 5, 10, 20, 30]"
          layout="sizes, prev, pager, next, jumper,total"
          :total="props.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </teleport>
  </template>
  <template v-else>
    <div :class="['pagination', props.styleClass]">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 5, 10, 20, 30]"
        layout="sizes, prev, pager, next, jumper,total"
        :total="props.totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
</template>

<script setup lang="ts">
import { ref } from "vue"

interface IProps {
  totalCount: number
  styleClass?: "fixed" | "common"
  defaultPageSize?: number
}

const props = withDefaults(defineProps<IProps>(), {
  defaultPageSize: 5
})

const emit = defineEmits(["paginationChange"])

let currentPage = ref(1)
let pageSize = ref(props.defaultPageSize)

function handleSizeChange(limit) {
  //   pageSize.value = limit
  const offset = (currentPage.value - 1) * pageSize.value
  emit("paginationChange", limit, offset)
}

function handleCurrentChange(currentPage) {
  //   currentPage.value = currentPage
  //   console.log("currentPage", currentPage, pageSize.value)
  const offset = (currentPage - 1) * pageSize.value
  emit("paginationChange", pageSize.value, offset)
}
</script>

<style lang="less" scoped>
.pagination {
  // background-color: rgba(250, 247, 255, 0.8);
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12);
  padding: 12px 24px;
}
.fixed {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 100;
}

.common {
  margin: 20px auto;
  width: 50%;
}
</style>
